<template>
  <div id="form">
    <!--登录-->
    <el-card class="box-card" v-if="isShow">
      <h3>登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</h3>
    <el-form ref="onLoad_form" :model="onLoad_form" :rules="onLoad_rules" label-width="65px">
      <el-form-item label="用户名" prop="user_name">
        <el-input v-model="onLoad_form.user_name" size="small"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="user_password">
        <el-input type="password" v-model="onLoad_form.user_password" size="small"></el-input>
        <label style="margin-left: 250px;color: green;font-size: 12px;" @click="findPassword">找回密码</label>
      </el-form-item>
      <el-button size="small" type="primary" @click="onSubmit">登录</el-button>
      <el-button size="small" @click="load_register">注册</el-button>

    </el-form>
    </el-card>

    <!--注册-->
    <el-card class="box-card" v-if="!isShow">
      <h3>注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;册</h3>
      <el-form ref="register_form" :model="register_form" :rules="register_rules" label-width="65px">
        <el-form-item label="用户名" prop="user_name">
          <el-input v-model="register_form.user_name" size="small"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="user_password">
          <el-input type="password" v-model="register_form.user_password" size="small"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="user_password2">
          <el-input type="password" v-model="register_form.user_password2" size="small"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="register_form.user_nick_name" size="small"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="user_email">
          <el-input v-model="register_form.user_email" size="small" placeholder="该邮箱只能绑定一个账号"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="user_group_type1">
          <el-select v-model="register_form.user_group_type1" placeholder="请选择角色" size="small">
            <el-option label="教师" value="2"></el-option>
            <el-option label="考生" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="user_sex">
          <el-radio-group v-model="register_form.user_sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-button size="small" type="primary" @click="onRegister">提交</el-button>
        <el-button size="small" @click="load_register">取消</el-button>

      </el-form>
    </el-card>

    <el-dialog
      title="找回密码"
      :visible.sync="findPasswordForm.findPasswordVisible"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false">
      <el-form ref="findPasswordForm" :model="findPasswordForm" :rules="findPasswordForm_rules" label-width="110px">
        <el-form-item label="邮箱" prop="user_email">
          <el-input v-model="findPasswordForm.user_email" size="small" style="width: 80%" placeholder="注册时使用的邮箱"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="closeFindPasswordDialog">取 消</el-button>
      <el-button size="mini" type="primary" @click="submitFindInfo">确 定</el-button>
    </span>
    </el-dialog>

  </div>
</template>

<script>
  import {login,userRegister} from '@/api/user'
  import {userFindPassword} from '@/api/system'
  import {store} from '@/vuex/store'
  import ElFormItem from "../../node_modules/element-ui/packages/form/src/form-item";
 export default {
   components: {ElFormItem},
   store, //注册store
  data () {
    return {
      isShow:true, //显示登录表单

      onLoad_form:{
        user_name:"",
        user_password:""
      },

      findPasswordForm:{
        findPasswordVisible:false,
        user_email:""
      },

      register_form:{
          user_name:"",
          user_password:"",
          user_password2:"",
          user_nick_name:"",
          user_sex:"",
          user_group_type1:"",
          user_group_type:"",
          user_email:""
      },

      onLoad_rules:{
        user_name: [
          { required: true, message: '请输入用户名称', trigger: 'change' },
        ],
        user_password:[
          { required: true, message: '请输入密码', trigger: 'change' },
        ]
      },

      register_rules:{
        user_name:[{ required: true, message: '用户名不能为空', trigger: 'change' },{ min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' }],
        user_password:[{ required: true, message: '密码不能为空', trigger: 'change' },{ min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' }],
        user_password2:[{ required: true, message: '密码不能为空', trigger: 'change' },{ min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' }],
        user_sex:[{ required: true, message: '性别不能为空', trigger: 'change' },],
        user_email:[{ required: true, message: '邮箱不能为空', trigger: 'change'}, {type: 'email',message: '请输入正确的邮箱地址',trigger: ['blur', 'change']}],
        user_group_type1:[{ required: true, message: '角色不能为空', trigger: 'change' },]
      },

      findPasswordForm_rules:{
        user_email:[{ required: true, message: '邮箱不能为空', trigger: 'change'}, {type: 'email',message: '请输入正确的邮箱地址',trigger: ['blur', 'change']}]
      }
    }
  },
  methods:{
    //登录
    onSubmit(){
      //校验数据
      this.$refs["onLoad_form"].validate((valid) => {
        if (valid) {
          //调用后台接口，提交用户的登录信息
          login(this.onLoad_form).then(res=>{
            if(res.code == 200){
              //this.$store.commit("userMeg",res.data); //存储登录用户信息
              this.$store.commit('handleUser',res.data);
              sessionStorage.setItem("user",JSON.stringify(this.$store.getters.user));
              console.log(sessionStorage.getItem("user"));
              this.$router.push({ path: '/main' });
            }else{
              this.$message.error("用户名或密码错误");
            }
          });
        }
      });
    },

    //注册
    onRegister(){
      this.$refs["register_form"].validate((valid) => {
         if(valid){
           if(this.register_form.user_password != this.register_form.user_password2){
             this.$message({
               message: '两次密码输入不相同',
               type: 'warning'
             });
             return;
           }

           this.register_form.user_group_type = parseInt(this.register_form.user_group_type1);
           userRegister(this.register_form).then(res=>{
               if(res.code == 200){
                   if(res.data > 0){
                     this.$message({
                       message: '该用户名已存在',
                       type: 'warning'
                     });
                   } else if(res.data < 0){
                     this.$message({
                       message: '该邮箱已被绑定',
                       type: 'warning'
                     });
                   }else{
                     this.$message({
                       message: '注册成功',
                       type: 'success'
                     });
                     this.load_register();
                   }
               }
           })
         }
      });
    },

    //找回密码
    findPassword(){
      this.findPasswordForm.findPasswordVisible = true;
    },

    //发送数据到后台找回密码
    submitFindInfo(){
      this.$refs["findPasswordForm"].validate((valid) => {
          if(valid){
            userFindPassword(this.findPasswordForm).then(res=>{
                if(res.code == 200){
                    if(res.data == -1){
                      this.$message({
                        message: '密码找回失败，请稍后重试！',
                        type: 'error'
                      });
                    }else if(res.data == 0){
                      this.$message({
                        message: '与注册邮箱不一致',
                        type: 'warning'
                      });
                    }else if(res.data == 1){
                      this.$message({
                        message: '信息已发至你邮箱，请注意查看',
                        type: 'success'
                      });
                      this.closeFindPasswordDialog();
                    }
                }
            });
          }
      })
    },

    closeFindPasswordDialog(){
        this.findPasswordForm.user_email = "";
        this.findPasswordForm.findPasswordVisible = false;

    },

    //点击注册/取消
    load_register(){
        this.isShow = !this.isShow
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 #form{
   width: 450px;
   position: relative;
   left: 50%;
   margin-top: 80px;
   margin-left: -190px;
 }

 #form .el-card .el-card__body .el-form-item >>> .el-form-item__content .el-select{
   width: 100%;
 }
</style>
